<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>限时秒杀</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			#box {
				width: 702px;
				height: 378px;
				/*
				 * 背景图片
				 */
				background: url(../../img/flash_sale.png);
				/*
				 * 居中
				 */
				margin: 0 auto;
				/*
				 * 父元素定位
				 */
				/*position: absolute;*/
			}
			/*
			 * 内部4个小框
			 */
			
			#box div {
				width: 50px;
				height: 50px;
				border: 1px solid gray;
				/*
			 * 显示同一行 display也能实现
			 */
				float: left;
				/*
			 * 相对于父元素
			 */
				position: relative;
				top: 260px;
				left: 300px;
				margin-left: 15px;
				text-align: center;
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div id="day"></div>
			<div id="hour"></div>
			<div id="miunte"></div>
			<div id="seconds"></div>
		</div>
	</body>
	<script>
		/*
		 * 1 获取结束时间
		 * 2 获取剩余时间：结束时间-当前时间
		 *   剩余时间显示在页面4个框中
		 * 3 计时器每隔一秒执行函数
		 */
		//当前时间

		//结束时间的毫秒数
		//var endSeconds = now.getTime() + 24 * 60 * 60 * 2 * 1000;
		var endSeconds = new Date('2018-06-05 10:46:00').getTime();
		var day = hour = minute = seconds = 0;

		function myTime() {
			var nowtime = new Date();
			//获取剩余时间
			var remain = (endSeconds - nowtime.getTime()) / 1000;
			if(remain > 0) {
				//计算剩余的天数
				var day = parseInt(remain / (24 * 60 * 60));
				//计算剩余的小时
				var hour = parseInt((remain / (60 * 60)) % 24);
				//计算剩余的分钟 
				var minute = parseInt((remain / 60) % 60);
				//计算剩余的秒
				var seconds = parseInt(remain % 60);
			} else {
				clearInterval(timer); //清除计时器
				day = hour = minute = seconds = 0;
			}

			day = (day < 10 ? '0' + day : day);
			hour = (hour < 10 ? '0' + hour : hour);
			minute = (minute < 10 ? '0' + minute : minute);
			seconds = (seconds < 10 ? '0' + seconds : seconds);
			//剩余天、小时、分钟、秒显示在页面上
			document.getElementById('day').innerHTML = day + '天';
			document.getElementById('hour').innerHTML = hour + '时';
			document.getElementById('miunte').innerHTML = minute + '分';
			document.getElementById('seconds').innerHTML = seconds + '秒';
		}
		//计时器
		var timer = window.setInterval(myTime, 1000);
	</script>

</html>